/* eslint-disable no-nested-ternary */
/* eslint-disable @typescript-eslint/camelcase */
/* eslint-disable max-len */
/* eslint-disable consistent-return */
/**
 * Created by zhangsong on 2019-05-08.
 */
import Power from '@/constants/power';
import Authorized from '@/utils/Authorized';
import InputGroupGrid from '@/components/InputGroupGrid';
import CreatableSelect from 'react-select/creatable';
// import { components } from 'react-select';
import React, { Component } from 'react';
import Selects, { components } from 'react-select';
import {
  Form,
  Input,
  DatePicker,
  Button,
  Radio,
  Upload,
  Icon,
  Spin,
  Modal,
  Row,
  Col,
  Tooltip,
  Select,
  Checkbox,
  message,
} from 'antd';
import Modals from '@/components/Modal';
import { connect } from 'dva';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { formatMessage, FormattedMessage, getLocale } from '@/utils/i18n';
import ContractorReducer from '@/dva/application/contractor';
import TemporaryReducer from '@/dva/application/temporary';
import UserReducer from '@/dva/user';
import { ContractorApplication } from '@/constants/routes';
import { WorkCardDefault } from '@/constants/styleConfig';
import PDFPreview from '@/components/PDFPreview';
import { getBase64, getPageQuery } from '@/utils/utils';
import { checkHkid } from '@/utils/checkhkid'

import Style from './index.module.scss';
import './index.scss';
import moment from 'moment';

const { Namespace, Effects, Reducers } = ContractorReducer;
const { Option } = Select;

@connect(
  state => ({
    contractorStore: state[Namespace],
    userStore: state[UserReducer.Namespace],
    temStore: state[TemporaryReducer.Namespace],
  }),
  dispatch => ({
    handleSubmit: data =>
      dispatch({
        type: `${Namespace}/${Effects.saveContractor}`,
        data,
      }),
    handPDFModalCancel: data =>
      dispatch({
        type: `${Namespace}/${Effects.handPDFModalCancel}`,
        data,
      }),
    handleSaveModalOk() {
      dispatch({
        type: `${Namespace}/${Reducers.setState}`,
        data: {
          saveSuccessModal: false,
          pdfPreviewVisible: true,
        },
      });
    },
    saveModalCancel() {
      dispatch({
        type: `${Namespace}/${Reducers.setState}`,
        data: {
          saveSuccessModal: false,
        },
      });
    },
    listSubcontractor() {
      dispatch({
        type: `${Namespace}/${Effects.listSubcontractor}`,
      });
    },
    getGroupList() {
      dispatch({
        type: `${Namespace}/${Effects.getGroupList}`,
      });
    },
    creatGroupList: data => {
      dispatch({
        type: `${Namespace}/${Effects.creatGroupList}`,
        data,
      });
    },
    getMainContractor() {
      dispatch({
        type: `${Namespace}/${Effects.getMainContractor}`,
      });
    },
    createMainContractor: data => {
      dispatch({
        type: `${Namespace}/${Effects.createMainContractor}`,
        data,
      });
    },
    modifycontralist: data => {
      dispatch({
        type: `${Namespace}/${Effects.modifycontralist}`,
        data,
      });
    },
    deletecontralist: data => {
      dispatch({
        type: `${Namespace}/${Effects.deletecontralist}`,
        data,
      });
    },
    modifygrouplist: data => {
      dispatch({
        type: `${Namespace}/${Effects.modifygrouplist}`,
        data,
      });
    },
    deletegrouplist: data => {
      dispatch({
        type: `${Namespace}/${Effects.deletegrouplist}`,
        data,
      });
    },
    getDefaultData: data => {
      dispatch({
        type: `${Namespace}/${Effects.getDefaultData}`,
        data,
      });
    },
  }),
)
@Form.create()
class Index extends Component {
  constructor(props) {
    super(props);
    const obj = getPageQuery();
    this.state = {
      data: obj?.id,
      previewVisible: false,
      previewImage: '',
      grouplist: [],
      creatSeleteModal: false,
      clientX: 0,
      clientY: 0,
      menuIsopen: false,
      menuIsopentwo: false,
      creatInput: '',
      creatId: 0,
      seletype: '',
      infoprt: {}
    };
  }

  componentDidMount() {
    const { listSubcontractor, getGroupList, getMainContractor, userStore, getDefaultData, temStore = {} } = this.props;
    const { currentUser } = userStore;
    const values = temStore?.contractorInfo;
    console.log('進來的時候打印的', this.state.data)
    if (this.state.data) {
      this.setState({
        infoprt: values
      })
    }
    listSubcontractor();
    getGroupList();
    getMainContractor();
    if (currentUser.role_id === '110' && currentUser.contractNumber) {
      getDefaultData(currentUser.contractNumber)
    }
  }

  normFile = e => {
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  // 显示头像预览
  handlePhotographPreview = async file => {
    if (file.type === 'application/pdf') {
      Modal.info({ title: formatMessage('applicationContractor.tips.noSupportedPDF') });
      return;
    }
    if (!file.url) {
      if (file.response) {
        file.thumbUrl = file.response;
      } else {
        file.thumbUrl = await getBase64(file.originFileObj);
      }
    }

    this.setState({
      previewImage: file.url || file.thumbUrl,
      previewVisible: true,
    });
  };

  handlePhotographClose = () => {
    this.setState({
      previewImage: '',
      previewVisible: false,
    });
  };

  handleClear = () => {
    const { form } = this.props;
    form.setFieldsValue({
      surname: undefined,
      otherName: undefined,
      sex: undefined,
      nameAlias: undefined,
      commercialCodeAlias: undefined,
      identityCard: undefined,
      birthday: undefined,
      placeOfBirth: undefined,
      nationality: undefined, // 国籍
      address: undefined,
      telephone: undefined,
      telephoneSpare: undefined,
      // 紧急联系人
      emergencyContactedName: undefined,
      emergencyContactedRelationship: undefined,
      emergencyContactedAddress: undefined,
      emergencyContactedTelephone: undefined,

      // partB
      contractNumber: undefined, // 主分包商编号
      contractPosition: undefined,
      contractSubcontractor: undefined,
      contractEmployer: undefined,
      contractFrom: undefined, // 合同开始时间
      contractTo: undefined, // 合同结束时间
      contractResident: undefined,
      contractApplicantDrive: undefined, // 是否申请车辆通行证
      contractVehicle: undefined, // 车牌号

      // partC
      checkedApproved: undefined,
      checkedClassification: undefined,
      checkedSpecified: undefined,
      checkedExpiry: undefined, // 申请过期时间
      checkedReasons: undefined, // 申请拒绝原因
      // 头像
      headPhoto: undefined,
      annexes: undefined,

      workerCardNo1: undefined,
      workerCardExpiredDate1: undefined,
      workerCardNo2: undefined,
      workerCardExpiredDate2: undefined,
      workerCardWorkType2: undefined,
      workerCardNo3: undefined,
      workerCardExpiredDate3: undefined,
      workerCardName4: undefined,
      workerCardNo4: undefined,
      workerCardExpiredDate4: undefined,
      workerCardName5: undefined,
      workerCardNo5: undefined,
      workerCardExpiredDate5: undefined,
      drivingLicenseExpire: undefined,

      vaccination_date1: undefined,
      vaccination_date2: undefined,
      vaccination_date3: undefined,
      vaccination_date4: undefined,
      vaccination_date5: undefined,

      isBlack: false,
    });
  };

  setHeadPhoto = async list => {
    let i = 0;
    if (Array.isArray(list)) {
      for (i = 0; i < list.length; i += 1) {
        if (!list[i].url) {
          if (list[i].response) {
            list[i].thumbUrl = list[i].response;
          } else if (!list[i].thumbUrl) {
            // eslint-disable-next-line no-await-in-loop
            list[i].thumbUrl = await getBase64(list[i].originFileObj);
          }
        }
      }
    }
    return list;
  }

  setDataList = list => {
    let annexesBase64 = [];
    if (Array.isArray(list)) {
      annexesBase64 = list.map(item => item.thumbUrl);
    }
    return annexesBase64
  }

  handleSubmit = e => {
    e.preventDefault();
    const { form, handleSubmit, userStore, contractorStore } = this.props;
    // let contractNumber = null;

    form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        const {
          headPhoto,
          annexes,
          checkedSpecified = [],
          contractSubcontractor,
          workerCardNo1,
          workerCardExpiredDate1,
          contractNumber,
          id_base64,
          green_base64,
          drive_base64,
          regist_base64,
          vacc_base64,
          exemption_base64,
          drive_certificate_base64,
          safety_certificate_base64,
          inspect_certificate_base64,
          identityCard,
        } = values;
        // if (!checkHkid(identityCard)) {
        //   return Modals.tips(formatMessage('applicationContractor.columns.identityCard.rez'));
        // }
        let newcontractNumber = '';
        const { area } = userStore;

        const { subcontractor, mainContractorList } = contractorStore;
        console.log('checkHkid(identityCard)', checkHkid(identityCard))

        for (let i = 0; i < mainContractorList.length; i += 1) {
          if (contractNumber.value === mainContractorList[i].value || contractNumber.value === mainContractorList[i].label) {
            newcontractNumber = mainContractorList[i].label
          }
        }
        if (
          (workerCardNo1 && !workerCardExpiredDate1) ||
          (!workerCardNo1 && workerCardExpiredDate1)
        ) {
          return message.error(formatMessage('applicationContractor.columns.greencard'));
        }
        const subcontractorObj = subcontractor.reduce((prev, next) => {
          prev[next.id] = next;
          return prev;
        }, {});
        const contractSubcontractorName = subcontractorObj[contractSubcontractor];
        const areaObj = area.reduce((prev, next) => {
          prev[next.id] = next;
          return prev;
        }, {});
        checkedSpecified.sort((a, b) => Number(a) - Number(b));
        const areaSpecified = checkedSpecified.map(item => areaObj[item]);
        let i = 0;
        let annexeList = annexes;
        if (!annexeList) {
          annexeList = [];
        }
        for (i = 0; i < annexeList.length; i += 1) {
          if (!annexeList[i].url) {
            if (annexeList[i].response) {
              annexeList[i].thumbUrl = annexeList[i].response;
            } else if (!annexeList[i].thumbUrl) {
              // eslint-disable-next-line no-await-in-loop
              annexeList[i].thumbUrl = await getBase64(annexeList[i].originFileObj);
            }
          }
        }
        handleSubmit({
          ...values,
          annexes: annexeList,
          headPhoto: await this.setHeadPhoto(headPhoto),
          id_base64: await this.setHeadPhoto(id_base64),
          green_base64: await this.setHeadPhoto(green_base64),
          drive_base64: await this.setHeadPhoto(drive_base64),
          regist_base64: await this.setHeadPhoto(regist_base64),
          vacc_base64: await this.setHeadPhoto(vacc_base64),
          exemption_base64: await this.setHeadPhoto(exemption_base64),
          drive_certificate_base64: await this.setHeadPhoto(drive_certificate_base64),
          safety_certificate_base64: await this.setHeadPhoto(safety_certificate_base64),
          inspect_certificate_base64: await this.setHeadPhoto(inspect_certificate_base64),
          checkedSpecified: areaSpecified,
          contractSubcontractorName,
          contractNumber: newcontractNumber,
        });
      }
    });
  };

  handleSaveModalCancel = () => {
    const { history, saveModalCancel } = this.props;
    saveModalCancel();
    history.push(ContractorApplication.list.url);
  };

  previewPdf = () => {
    const { previewPdf } = this.props;
    previewPdf({});
  };

  onChangeDate = index => {
    const { form } = this.props;
    const date1 = form.getFieldValue('vaccination_date1');
    const date2 = form.getFieldValue('vaccination_date2');
    const date3 = form.getFieldValue('vaccination_date3');
    const date4 = form.getFieldValue('vaccination_date4');
    const date5 = form.getFieldValue('vaccination_date5');
    console.log('所有的日期', index, date1, date2, date3, date4, date5);
    // // let bool = false;
    // switch (index) {
    //   case 1:
    //     break;
    //   case 2:

    //     break;
    //   case 3:

    //     break;
    //   case 4:

    //     break;
    //   case 5:

    //     break;
    //   default:
    //     break;
    // }
  };

  handlePDFOk = () => {
    const { handPDFModalCancel, history } = this.props;
    handPDFModalCancel();
    history.push(ContractorApplication.list.url);
  };

  handlePDFCancel = () => {
    const { handPDFModalCancel, history } = this.props;
    handPDFModalCancel();
    history.push(ContractorApplication.list.url);
  };

  // 分组名称
  handleChange = value => {
    console.log('valuevaluevalue', value)
  }

  childrenGroup = groupList => {
    console.log('groupListgroupList', groupList)
    const children = [];
    for (let i = 0; i < groupList.length; i += 1) {
      children.push(<Option key={groupList[i]}>{groupList[i]}</Option>);
    }
    return children
  }

  // 添加的时候
  onCreateOption = async str => {
    const { form, creatGroupList, contractorStore } = this.props;
    const { groupList } = contractorStore
    const { grouplist } = this.state;
    const lists = grouplist
    lists.push({ value: str, label: str })
    this.setState({
      grouplist: lists,
    })
    form.setFieldsValue({
      groupName: lists,
    })
    const data = [str];
    await creatGroupList({ data, form })
    // await creatGroupList({ data, pagedata: { form, grouplist } })
    console.log('添加之后的了', groupList)

    // creatGroupList(data)
  }

  // 添加的时候
  onCreateMainList = str => {
    const { form, createMainContractor } = this.props;

    const data = [];
    data.push(str);
    console.log('點了添加的東西', str, data)
    form.setFieldsValue({
      contractNumber: { value: str, label: str },
    })
    createMainContractor(str)
  }

  onChangeMainList = str => {
    console.log('好吧好吧', str)
  }

  onChangeselete = str => {
    const { form } = this.props;
    this.setState({
      grouplist: str,
    })
    form.setFieldsValue({
      groupname: str,
    })
    console.log('onChangeselete', str)
  }

  // 访问地区的位置
  listUpdate = () => {
    const { creatId, creatInput, seletype, grouplist } = this.state;
    const { modifygrouplist, form, modifycontralist, contractorStore } = this.props;
    const { mainContractorList, groupList } = contractorStore

    this.setState({
      creatSeleteModal: false,
    })
    if (seletype === 'gro') {
      let id = null;
      let label = '';
      for (let i = 0; i < groupList.length; i += 1) {
        if (creatId === groupList[i].label || creatId === groupList[i].value) {
          id = groupList[i].value;
          label = groupList[i].label;
        }
      }
      console.log('啦啦啦啦啦', form.getFieldValue('groupName'), id, groupList)
      modifygrouplist({
        data: creatInput,
        id: id || creatId,
      })
    } else {
      let id = null;
      let label = '';
      if (form.getFieldValue('contractNumber')) {
        for (let i = 0; i < mainContractorList.length; i += 1) {
          if (form.getFieldValue('contractNumber').label === mainContractorList[i].label) {
            id = mainContractorList[i].value;
            label = mainContractorList[i].label;
          }
        }
        if (form.getFieldValue('contractNumber').label === label) {
          form.setFieldsValue({
            contractNumber: { value: id, label: creatInput },
          })
        }
      }
      modifycontralist({
        data: creatInput,
        id: id || creatId,
      })
    }
  }

  // 访问地区的位置
  listDelete = () => {
    const { creatId, creatInput, seletype } = this.state;
    const { deletegrouplist, form, deletecontralist, contractorStore } = this.props;
    const { mainContractorList, groupList } = contractorStore
    this.setState({
      creatSeleteModal: false,
    })
    console.log('11111', form.getFieldValue('groupName'), creatId)
    if (seletype === 'gro') {
      let id = null;
      let label = '';
      if (form.getFieldValue('groupName')) {
        for (let i = 0; i < groupList.length; i += 1) {
          if (form.getFieldValue('groupName').label === groupList[i].label) {
            id = groupList[i].value;
            label = groupList[i].label;
          }
        }
        if (form.getFieldValue('groupName').label === label) {
          form.setFieldsValue({
            contractNumber: null,
          })
        }
      }
      deletegrouplist(creatId)
    } else {
      let id = null;
      let label = '';
      if (form.getFieldValue('contractNumber')) {
        for (let i = 0; i < mainContractorList.length; i += 1) {
          if (form.getFieldValue('contractNumber').label === mainContractorList[i].label) {
            id = mainContractorList[i].value;
            label = mainContractorList[i].label;
          }
        }
        if (form.getFieldValue('contractNumber').label === label) {
          form.setFieldsValue({
            contractNumber: null,
          })
        }
      }
      deletecontralist(creatId)
    }
  }

  // 自定义可选项
  Option = (event, str) => {
    const { data } = event;
    return (
      <components.Option {...event}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>{data.label}</div>
          <Button onClick={e => {
            e.stopPropagation();
            e.preventDefault();
            const left = e.clientX - (window.innerWidth / 2);
            this.setState({
              creatSeleteModal: true,
              clientX: left,
              clientY: e.clientY,
              creatInput: data.label,
              creatId: data.value,
              seletype: str,
            })
          }} style={{ zIndex: 1000, color: '#000' }} type="link" icon="more" />
        </div>
      </components.Option>
    );
  };

  render() {
    const { form, contractorStore = {}, temStore = {}, userStore = {}, handleSaveModalOk } = this.props;
    const { previewVisible, previewImage, grouplist, menuIsopentwo, creatInput, creatSeleteModal, clientX, clientY, menuIsopen, infoprt } = this.state;
    const { getFieldDecorator } = form;
    let headPhotoUpload = true;
    const headPhoto = form.getFieldValue('headPhoto');
    if (headPhoto && Array.isArray(headPhoto) && headPhoto.length > 0) {
      headPhotoUpload = false;
    }
    let annexesUpload = true;
    const annexes = form.getFieldValue('annexes');
    if (annexes && Array.isArray(annexes) && annexes.length > 10) {
      annexesUpload = false;
    }

    const {
      saveLoading,
      pdfPreviewVisible,
      pdfReview,
      saveSuccessModal,
      subcontractor,
      groupList,
      mainContractorList,
      defaultData,
    } = contractorStore;
    const values = infoprt;
    const { area, workerType, currentUser } = userStore;
    console.log('登录东西', currentUser, temStore)
    const zoneTips = Array.isArray(area) ? (
      <div className={Style.zoneTipsWrapper}>
        {area.map(item => (
          <div
            key={item.id + (getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh)}
            className={Style.zoneTipsRow}
          >
            <div className={Style.zoneTipsLabel}>{item.areaCode}</div>
            <div>=</div>
            <div>{getLocale() === 'en-US' ? item.areaDescEn : item.areaDescZh}</div>
          </div>
        ))}
      </div>
    ) : null;
    const newgrouplist = groupList;
    const newstategroup = grouplist;
    for (let i = 0; i < newgrouplist.length; i += 1) {
      for (let k = 0; k < newstategroup.length; k += 1) {
        if (newgrouplist[i].label === newstategroup[k].label) {
          newstategroup[k].value = newgrouplist[i].value
        }
      }
    }
    return (
      <PageHeaderWrapper>
        <Spin spinning={!!saveLoading} size="large">
          <div className={`${Style.body} contractor-add-wrapper`}>
            <div className={Style.excelTitle}>
              <h1>AIRPORT AUTHORITY HONG KONG</h1>
              <h1>PROJECT SITE</h1>
              <h1>APPLICATION FOR CONTRACTORS&apos; SECURITY PASS</h1>
            </div>
            <Modal
              style={{ top: clientY + 20, left: clientX }}
              visible={creatSeleteModal}
              footer={null}
              closable={false}
              mask={false}
              maskClosable
              width={200}
              onCancel={() => {
                this.setState({
                  creatSeleteModal: false,
                })
              }}
            >
              <div>
                <Input maxLength={50} value={creatInput} onChange={e => {
                  console.log('eeee', e)
                  this.setState({
                    creatInput: e.target.value,
                  })
                }} />
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between' }}>
                  <Button type="primary" onClick={() => this.listUpdate()}>
                    {formatMessage('button.update')}
                  </Button>
                  <Button type="primary" onClick={() => this.listDelete()}>
                    {formatMessage('button.remove')}
                  </Button>
                </div>
              </div>
            </Modal>
            <Modal
              visible={previewVisible}
              footer={null}
              maskClosable
              onCancel={() => {
                this.handlePhotographClose();
              }}
            >
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
            <Modal
              visible={saveSuccessModal}
              title={formatMessage('baseInfo.saveSuccess')}
              okText={formatMessage('baseInfo.previewPDF')}
              cancelText={formatMessage('baseInfo.goToList')}
              onOk={() => handleSaveModalOk()}
              onCancel={() => this.handleSaveModalCancel()}
              footer={[
                <Button onClick={() => this.handleSaveModalCancel()}>
                  {formatMessage('baseInfo.goToList')}
                </Button>,
              ]}
            >
              <p>{formatMessage('applicationCommon.workerCard.pdfmessage')}</p>
            </Modal>
            <PDFPreview
              visible={pdfPreviewVisible}
              url={pdfReview}
              onOk={this.handlePDFOk}
              onCancel={this.handlePDFCancel}
              printing={Authorized.check(Power.ContractorApplication.printing, true, false)}
            />
            <Form labelAlign="right" onSubmit={this.handleSubmit}>
              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part A</strong>
                  <i>(TO BE COMPLETED BY THE APPLICANT)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.index}>1</div>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>Applicant's Particulars</div>
                    <div className={Style.table}>
                      <Row type="flex">
                        <Col xs={24} sm={8} md={8} order={3}>
                          <div className={Style.row}>
                            <Form.Item>
                              {getFieldDecorator('headPhoto', {
                                valuePropName: 'fileList',
                                getValueFromEvent: this.normFile,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.columns.headPhoto.errMessage',
                                    ),
                                  },
                                ],
                              })(
                                <Upload
                                  listType="picture-card"
                                  accept="image/*"
                                  customRequest={async ({ file, onSuccess }) => {
                                    const base64 = await new Promise(resolve => {
                                      const fileReader = new FileReader();
                                      fileReader.readAsDataURL(file);
                                      fileReader.onload = () => {
                                        resolve(fileReader.result);
                                      };
                                    });
                                    onSuccess(base64);
                                    return {
                                      abort() { },
                                    };
                                  }}
                                  onPreview={this.handlePhotographPreview}
                                  showUploadList
                                >
                                  {headPhotoUpload ? (
                                    <div>
                                      <div className="ant-upload-text">
                                        <Icon type="plus" />
                                        {formatMessage({
                                          id: 'applicationContractor.columns.headPhoto.name',
                                        })}
                                      </div>
                                    </div>
                                  ) : null}
                                </Upload>,
                              )}
                            </Form.Item>
                          </div>
                        </Col>
                        <Col xs={24} sm={16} md={16} order={1}>
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.surname.longText',
                              )}
                            >
                              {getFieldDecorator('surname', {
                                initialValue: values.name,
                                rules: [
                                  {
                                    required: true,
                                    message: formatMessage(
                                      'applicationContractor.columns.surname.errMessage',
                                    ),
                                  },
                                ],
                              })(<Input maxLength={50} className={Style.inputs} />)}
                            </Form.Item>
                          </div>
                          <div className={`${Style.row} ${Style.column2}`}>
                            <div>
                              <Form.Item
                                label={formatMessage(
                                  'applicationContractor.columns.otherName.name',
                                )}
                              >
                                {getFieldDecorator('otherName', {
                                  initialValue: values.other_name,
                                })(<Input maxLength={50} />)}
                              </Form.Item>
                            </div>
                            <div>
                              <Form.Item
                                label={formatMessage('applicationContractor.columns.sex.name')}
                              >
                                {getFieldDecorator('sex', {
                                  rules: [
                                    {
                                      required: true,
                                      message: formatMessage(
                                        'applicationContractor.columns.sex.errMessage',
                                      ),
                                    },
                                  ],
                                  initialValue: values.sex || 0,
                                })(
                                  <Radio.Group>
                                    <Radio value={0}>{formatMessage('baseInfo.male')}</Radio>
                                    <Radio value={1}>{formatMessage('baseInfo.female')}</Radio>
                                  </Radio.Group>,
                                )}
                              </Form.Item>
                            </div>
                          </div>
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage('applicationContractor.columns.nameAlias.name')}
                            >
                              {getFieldDecorator('nameAlias', {
                                initialValue: values.chi_name,
                              })(
                                <Input maxLength={50} className={Style.inputs} />,
                              )}
                            </Form.Item>
                          </div>
                          <div className={Style.row}>
                            <Form.Item
                              label={formatMessage(
                                'applicationContractor.columns.commercialCodeAlias.name',
                              )}
                            >
                              {getFieldDecorator('commercialCodeAlias', {})(<InputGroupGrid />)}
                            </Form.Item>
                          </div>
                        </Col>
                      </Row>
                      <div className={Style.row}>
                        <Form.Item
                          label={
                            <div
                              style={{
                                display: 'inline-block',
                                lineHeight: '24px',
                              }}
                            >
                              Hong Kong Identity Card / Passport /
                              <br />
                              Imported Labour Identity Card Number:
                            </div>
                          }
                          colon={false}
                        >
                          {getFieldDecorator('identityCard', {
                            initialValue: values.identity_card,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.identityCard.errMessage',
                                ),
                              },
                              // {
                              //   pattern: '^[A-Z]{1,2}[0-9]{6}\\(?[0-9A]\\)?$',
                              //   message: formatMessage(
                              //     'applicationContractor.columns.identityCard.rez',
                              //   ),
                              // },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('id_base64', {
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              name="logo"
                              accept=".pdf,image/*"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              listType="picture"
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.birthday.longText')}
                        >
                          {getFieldDecorator('birthday', {})(
                            <DatePicker format={formatMessage('datetimeFormat.date')} />,
                          )}
                        </Form.Item>
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.placeOfBirth.name')}
                          >
                            {getFieldDecorator('placeOfBirth', {})(
                              <Input maxLength={50} className={Style.inputs} />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.nationality.name')}
                          >
                            {getFieldDecorator('nationality', {})(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.address.name')}
                        >
                          {getFieldDecorator('address', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.address.errMessage',
                                ),
                              },
                            ],
                          })(<Input maxLength={255} />)}
                        </Form.Item>
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.telephone.name')}
                          >
                            {getFieldDecorator('telephone', {
                              initialValue: values.tel,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.telephone.errMessage',
                                  ),
                                },

                                {
                                  pattern: '^[0-9]{8,8}$',
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedName.rez',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.telephoneSpare.name',
                            )}
                          >
                            {getFieldDecorator('telephoneSpare', {
                              rules: [
                                {
                                  pattern: '^[0-9]{8,8}$',
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedName.rez',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={Style.main}>
                  <div className={Style.index}>2</div>
                  <div className={Style.detailWrapper}>
                    <div>In case of Emergency the following person should be contacted :</div>
                    <div className={Style.table}>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.emergencyContactedName.longText',
                            )}
                          >
                            {getFieldDecorator('emergencyContactedName', {
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.emergencyContactedName.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.emergencyContactedRelationship.name',
                            )}
                          >
                            {getFieldDecorator('emergencyContactedRelationship', {})(
                              <Input maxLength={50} />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.emergencyContactedAddress.name',
                          )}
                        >
                          {getFieldDecorator('emergencyContactedAddress', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.emergencyContactedAddress.errMessage',
                                ),
                              },
                            ],
                          })(
                            <Input.TextArea
                              maxLength={1000}
                              autoSize={{
                                minRows: 2,
                                maxRows: 6,
                              }}
                            />,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.emergencyContactedTelephone.name',
                          )}
                        >
                          {getFieldDecorator('emergencyContactedTelephone', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.emergencyContactedTelephone.errMessage',
                                ),
                              },
                              {
                                pattern: '^[0-9]{8,8}$',
                                message: formatMessage(
                                  'applicationContractor.columns.emergencyContactedName.rez',
                                ),
                              },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part B</strong>
                  <i>(TO BE COMPLETED BY THE CONTRACTOR CONCERNED)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>To : Security Manager ( Airport Authority Hong Kong )</div>
                    <div className={Style.table}>
                      <div className={Style.row}>
                        {/* <Form.Item
                          label={formatMessage('applicationContractor.columns.contractNumber.name')}
                        >
                          {getFieldDecorator('contractNumber', {
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.contractNumber.errMessage',
                                ),
                              },
                            ],
                          })(<Input maxLength={50} />)}
                        </Form.Item> */}
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.contractNumber.name')}
                        >
                          {getFieldDecorator('contractNumber', {
                            initialValue: currentUser.role_id === '110' ? { value: currentUser.contractId, label: currentUser.contractNumber } : values.contract_number,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationContractor.columns.contractNumber.errMessage',
                                ),
                              },
                            ],
                          })(
                            <CreatableSelect
                              isDisabled={currentUser.role_id === '110'}
                              styles={{
                                menu: base => ({
                                  ...base,
                                  zIndex: 10,
                                }),
                                // control: base => ({
                                //   ...base,
                                //   height: '35px !important',
                                // }),
                                input: base => ({
                                  ...base,
                                  // height: '35px !important',
                                  // backgroundColor: 'pink',

                                }),
                                multiValue: base => ({
                                  ...base,
                                  // backgroundColor: 'pink',
                                  // height: '25px !important',
                                  display: 'flex',
                                  alignItems: 'center',
                                }),
                                valueContainer: base => ({
                                  ...base,
                                  height: '45px !important',
                                }),
                              }}
                              style={{ height: 20 }}
                              menuIsOpen={menuIsopen}
                              onMenuOpen={() => {
                                this.setState({
                                  menuIsopen: !menuIsopen,
                                })
                              }}
                              onMenuClose={() => {
                                if (creatSeleteModal) {
                                  return;
                                }
                                this.setState({
                                  menuIsopen: false,
                                })
                              }}
                              // isMulti
                              components={{ Option: e => this.Option(e, 'con') }}
                              onCreateOption={this.onCreateMainList}
                              onChange={this.onChangeMainList}
                              options={mainContractorList}
                              placeholder={formatMessage('baseInfo.placeholderChecked')}
                            />,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.company')}
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractPosition.name',
                            )}
                          >
                            {getFieldDecorator('contractPosition', {})(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractSubcontractor.name',
                            )}
                          >
                            {getFieldDecorator('contractSubcontractor', {
                              initialValue: values.sub_contractor,
                            })(
                              <Select
                                showSearch
                                style={{ width: '100%' }}
                                placeholder={formatMessage('baseInfo.placeholderChecked')}
                                optionFilterProp="children"
                                loading={subcontractor === null}
                                filterOption={(input, option) =>
                                  option.props.children
                                    .toLowerCase()
                                    .indexOf(input.toLowerCase()) >= 0
                                }
                              >
                                {Array.isArray(subcontractor)
                                  ? subcontractor.map(item => (
                                    <Select.Option key={item.id}>{`${item.name}`}</Select.Option>
                                  ))
                                  : null}
                              </Select>,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractEmployer.name',
                            )}
                          >
                            {getFieldDecorator('contractEmployer', {})(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.contractFrom.name')}
                          >
                            {getFieldDecorator('contractFrom', {
                              initialValue: moment(new Date(), 'DD/MM/YYYY'),
                            })(
                              <DatePicker format={formatMessage('datetimeFormat.date')} />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.columns.contractTo.name')}
                          >
                            {getFieldDecorator('contractTo', {
                              initialValue: currentUser.role_id === '110' ? moment(new Date(defaultData.contract_to), 'DD/MM/YYYY') : undefined,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.contractTo.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.contractResident.name',
                          )}
                        >
                          {getFieldDecorator('contractResident', {})(
                            <Radio.Group>
                              <Radio value={1}>
                                <FormattedMessage id="applicationContractor.columns.contractResident.resident" />
                              </Radio>
                              <Radio value={0}>
                                <FormattedMessage id="applicationContractor.columns.contractResident.unresident" />
                              </Radio>
                            </Radio.Group>,
                          )}
                        </Form.Item>
                      </div>

                      <div className={`${Style.row}`}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.contractApplicantDrive.name',
                            )}
                          >
                            {getFieldDecorator('contractApplicantDrive', {})(
                              <Radio.Group>
                                <Radio value={1}>
                                  <FormattedMessage id="applicationContractor.columns.contractApplicantDrive.applicant" />
                                </Radio>
                                <Radio value={0}>
                                  <FormattedMessage id="applicationContractor.columns.contractApplicantDrive.disApplicant" />
                                </Radio>
                              </Radio.Group>,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.drivingLicenseExpire.name',
                            )}
                          >
                            {getFieldDecorator('drivingLicenseExpire', {})(
                              <DatePicker format={formatMessage('datetimeFormat.date')} />,
                            )}
                          </Form.Item>
                        </div>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('drive_base64', {
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              name="logo"
                              accept=".pdf,image/*"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              listType="picture"
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage(
                            'applicationContractor.columns.contractVehicle.name',
                          )}
                        >
                          {getFieldDecorator('contractVehicle', {})(<Input maxLength={50} />)}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.possify')}
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('drive_certificate_base64', {
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              name="logo"
                              accept=".pdf,image/*"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              listType="picture"
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.atteify')}
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('safety_certificate_base64', {
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              name="logo"
                              accept=".pdf,image/*"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              listType="picture"
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partB.depm')}
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.annexes.name')}
                        // extra="表格扫描文件"
                        >
                          {getFieldDecorator('inspect_certificate_base64', {
                            valuePropName: 'fileList',
                            getValueFromEvent: this.normFile,
                          })(
                            <Upload
                              name="logo"
                              accept=".pdf,image/*"
                              customRequest={async ({ file, onSuccess }) => {
                                const base64 = await new Promise(resolve => {
                                  const fileReader = new FileReader();
                                  fileReader.readAsDataURL(file);
                                  fileReader.onload = () => {
                                    resolve(fileReader.result);
                                  };
                                });
                                onSuccess(base64);
                                return {
                                  abort() { },
                                };
                              }}
                              listType="picture"
                              onPreview={this.handlePhotographPreview}
                            >
                              {annexesUpload ? (
                                <Button>
                                  <Icon type="upload" />
                                  {formatMessage('applicationStaff.columns.annexes.button')}
                                </Button>
                              ) : null}
                            </Upload>,
                          )}
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className={Style.part}>
                <div className={Style.title}>
                  <strong>Part C</strong>
                  <i>(TO BE COMPLETED BY SECURITY DEPARTMENT AIRPORT AUTHORITY HONG KONG)</i>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    {/* eslint-disable-next-line react/no-unescaped-entities */}
                    <div>{formatMessage('applicationContractor.text.partC.relevant')}</div>
                    <div className={Style.table}>
                      {
                        currentUser.role_id === '110' ? null :
                          <Form.Item label={formatMessage('applicationStaff.columns.checkedApproved.name')}>
                            {getFieldDecorator('checkedApproved', {
                              initialValue: 0,
                            })(
                              <Radio.Group>
                                {
                                  currentUser.role_id !== '110' ? (
                                    <Radio value={1}>
                                      <FormattedMessage id="applicationStaff.columns.checkedApproved.approved" />
                                    </Radio>
                                  ) : null
                                }
                                <Radio value={-1}>
                                  <FormattedMessage id="applicationStaff.columns.checkedApproved.disapproved" />
                                </Radio>
                                {
                                  currentUser.role_id === '100' ? (
                                    <Radio value={3}>
                                      <FormattedMessage id="applicationContractor.temporary.cancelled" />
                                    </Radio>
                                  ) : null
                                }
                                <Radio value={0}>
                                  <FormattedMessage id="baseInfo.needApprovalStatus" />
                                </Radio>
                              </Radio.Group>,
                            )}
                          </Form.Item>
                      }
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                        >
                          {getFieldDecorator('checkedExpiry', {
                            initialValue: currentUser.role_id === '110' ? moment(new Date(defaultData.checked_expiry), 'DD/MM/YYYY') : values.expire_time
                              ? moment(values.expire_time)
                              : null,
                            rules: [
                              {
                                required: true,
                                message: formatMessage(
                                  'applicationCommon.workerCard.expiredDate.errMessage',
                                ),
                              },
                            ],
                          })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                        </Form.Item>
                      </div>

                      <div className={Style.row}>
                        {formatMessage('applicationContractor.text.partC.restrictions')}
                      </div>
                      <div className={Style.row}>
                        <div>
                          <Form.Item
                            label={formatMessage(
                              'applicationContractor.columns.checkedClassification.name',
                            )}
                          >
                            {getFieldDecorator('checkedClassification', {})(
                              <Input maxLength={50} />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={
                            <span>
                              {formatMessage('applicationContractor.columns.checkedSpecified.name')}
                              &nbsp;
                              <Tooltip title={zoneTips}>
                                <Icon type="question-circle-o" />
                              </Tooltip>
                            </span>
                          }
                        >
                          {area == null ? (
                            <Spin spinning />
                          ) : (
                            getFieldDecorator('checkedSpecified', {
                              initialValue: currentUser.role_id === '110' ? defaultData.checked_specified : undefined,

                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationContractor.columns.checkedSpecified.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox.Group name="checkedSpecified">
                                {area.map(item => (
                                  <Checkbox
                                    key={item.id}
                                    value={item.id}
                                    disabled={item.status !== 1}
                                  >
                                    {item.areaCode}
                                  </Checkbox>
                                ))}
                              </Checkbox.Group>,
                            )
                          )}
                        </Form.Item>
                      </div>
                      <div className={Style.row}>
                        <Form.Item
                          label={formatMessage('applicationContractor.columns.checkedReasons.name')}
                        >
                          {getFieldDecorator('checkedReasons', {
                            initialValue: values.reasons,
                          })(<Input maxLength={50} />)}
                        </Form.Item>
                      </div>
                    </div>
                  </div>
                </div>
                <Form.Item
                  label={formatMessage('applicationContractor.columns.annexes.name')}
                // extra="表格扫描文件"
                >
                  {getFieldDecorator('annexes', {
                    valuePropName: 'fileList',
                    getValueFromEvent: this.normFile,
                  })(
                    <Upload
                      name="logo"
                      accept=".pdf,image/*"
                      customRequest={async ({ file, onSuccess }) => {
                        const base64 = await new Promise(resolve => {
                          const fileReader = new FileReader();
                          fileReader.readAsDataURL(file);
                          fileReader.onload = () => {
                            resolve(fileReader.result);
                          };
                        });
                        onSuccess(base64);
                        return {
                          abort() { },
                        };
                      }}
                      listType="picture"
                      onPreview={this.handlePhotographPreview}
                    >
                      {annexesUpload ? (
                        <Button>
                          <Icon type="upload" />
                          {formatMessage('applicationStaff.columns.annexes.button')}
                        </Button>
                      ) : null}
                    </Upload>,
                  )}
                </Form.Item>
                <Form.Item
                  label={formatMessage('applicationContractor.columns.annexes.groupname')}
                >
                  {getFieldDecorator('groupName', {
                    rules: [
                      {
                        required: false,
                        message: formatMessage(
                          'applicationCommon.workerCard.name.errMessage',
                        ),
                      },
                    ],
                  })(
                    <CreatableSelect styles={{
                      menu: base => ({
                        ...base,
                        zIndex: 10,
                      }),
                      control: base => ({
                        ...base,
                        height: '35px !important',
                      }),
                      input: base => ({
                        ...base,
                        height: '35px !important',
                        // backgroundColor: 'pink',
                      }),
                      multiValue: base => ({
                        ...base,
                        // backgroundColor: 'pink',
                        height: '25px !important',
                        display: 'flex',
                        alignItems: 'center',
                      }),
                      valueContainer: base => ({
                        ...base,
                        height: '35px !important',
                      }),
                    }}
                      // components={{
                      //   IndicatorsContainer: props => (
                      //     <div style={{ background: 'yellow' }}>
                      //       <components.IndicatorsContainer {...props} />
                      //     </div>
                      //   ),
                      // }}
                      menuIsOpen={menuIsopentwo}
                      onMenuOpen={() => {
                        this.setState({
                          menuIsopentwo: !menuIsopentwo,
                        })
                      }}
                      onMenuClose={() => {
                        if (creatSeleteModal) {
                          return;
                        }
                        this.setState({
                          menuIsopentwo: false,
                        })
                      }}
                      style={{ height: 20 }}
                      isMulti
                      // components={{ Option: e => this.Option(e, 'gro') }}
                      onCreateOption={this.onCreateOption}
                      onChange={this.onChangeselete}
                      options={groupList}
                      // value={grouplist}
                      placeholder={formatMessage('baseInfo.placeholderChecked')}
                    />,
                    //   <Select
                    //   dropdownRender={menu => (
                    //     <>
                    //       {menu}
                    //       <div>
                    //         <a style={{ padding: 10 }}>{formatMessage(
                    //           'applicationContractor.columns.annexes.creatgroupname',
                    //         )}</a>
                    //       </div>
                    //     </>
                    //   )}
                    //   mode="multiple"
                    //   allowClear
                    //   style={{ width: '50%' }}
                    //   placeholder={formatMessage('baseInfo.placeholderChecked')}
                    //   onChange={this.handleChange}
                    // >
                    //   {this.childrenGroup(groupList)}
                    //   </Select>
                  )}
                </Form.Item>
              </div>

              <div className={Style.part} >
                <div className={Style.title}>
                  <strong>Card</strong>
                </div>
                <div className={Style.main}>
                  <div className={Style.detailWrapper}>
                    <div className={Style.table}>
                      {/* 绿卡 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.greenCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName1', {
                              initialValue: WorkCardDefault.greenCard,
                              rules: [
                                {
                                  required: true,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo1', {
                              initialValue: values.green_card_number,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.num.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate1', {
                              initialValue: values.green_card_expire
                                ? moment(values.green_card_expire)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('green_base64', {
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            name="logo"
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      {/* 工人注册卡 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.registerCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName2', {
                              initialValue: WorkCardDefault.registerCard,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo2', {
                              initialValue: values.registration_card_number,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.num.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} autoComplete="off" />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate2', {
                              initialValue: values.registration_card_expire
                                ? moment(values.registration_card_expire)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.workType.name')}
                          >
                            {getFieldDecorator('workerCardWorkType2', {
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo2'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.workType.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Select
                                showSearch
                                style={{ width: '100%' }}
                                optionFilterProp="children"
                                filterOption={(input, option) =>
                                  option.props.children
                                    .toLowerCase()
                                    .indexOf(input.toLowerCase()) >= 0
                                }
                                loading={workerType === null}
                                placeholder={formatMessage('baseInfo.placeholderChecked')}
                              >
                                {Array.isArray(workerType)
                                  ? workerType.map(item => (
                                    <Select.Option
                                      key={item.id}
                                    >{`${item.code} - ${item.nameZh}`}</Select.Option>
                                  ))
                                  : null}
                              </Select>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('regist_base64', {
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            name="logo"
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      {/* 蓝卡 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.blueCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName3', {
                              initialValue: WorkCardDefault.blueCard,
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo3'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} disabled />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo3', {})(
                              <Input maxLength={50} autoComplete="off" />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate3', {
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo3'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 自定义 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName4', {
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo4'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo4', {})(
                              <Input maxLength={50} autoComplete="off" />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate4', {
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo4'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>
                      {/* 自定义2 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.customizeCard" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.name.name')}
                          >
                            {getFieldDecorator('workerCardName5', {
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo5'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(<Input maxLength={50} />)}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item label={formatMessage('applicationCommon.workerCard.num.name')}>
                            {getFieldDecorator('workerCardNo5', {})(
                              <Input maxLength={50} autoComplete="off" />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.expiredDate.name')}
                          >
                            {getFieldDecorator('workerCardExpiredDate5', {
                              rules: [
                                {
                                  required: form.getFieldValue('workerCardNo5'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(<DatePicker format={formatMessage('datetimeFormat.date')} />)}
                          </Form.Item>
                        </div>
                      </div>

                      {/* 疫苗日期 */}
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.vaccination_date" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date1')}
                          >
                            {getFieldDecorator('vaccination_date1', {
                              initialValue: values.vaccination_date1
                                ? moment(values.vaccination_date1)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                onChange={() => this.onChangeDate(1)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date2')}
                          >
                            {getFieldDecorator('vaccination_date2', {
                              initialValue: values.vaccination_date2
                                ? moment(values.vaccination_date2)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={!form.getFieldValue('vaccination_date1')}
                                onChange={() => this.onChangeDate(2)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date3')}
                          >
                            {getFieldDecorator('vaccination_date3', {
                              initialValue: values.vaccination_date3
                                ? moment(values.vaccination_date3)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2')
                                  )
                                }
                                onChange={() => this.onChangeDate(3)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={`${Style.row} ${Style.column3}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date4')}
                          >
                            {getFieldDecorator('vaccination_date4', {
                              initialValue: values.vaccination_date4
                                ? moment(values.vaccination_date4)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2') &&
                                    form.getFieldValue('vaccination_date3')
                                  )
                                }
                                onChange={() => this.onChangeDate(4)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.vaccination_date5')}
                          >
                            {getFieldDecorator('vaccination_date5', {
                              initialValue: values.vaccination_date5
                                ? moment(values.vaccination_date5)
                                : null,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.expiredDate.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={
                                  !(
                                    form.getFieldValue('vaccination_date1') &&
                                    form.getFieldValue('vaccination_date2') &&
                                    form.getFieldValue('vaccination_date3') &&
                                    form.getFieldValue('vaccination_date4')
                                  )
                                }
                                onChange={() => this.onChangeDate(5)}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('exemption_base64', {
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            name="logo"
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.include" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div style={{ display: 'flex' }}>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.include')}
                          >
                            {getFieldDecorator('isInfected', {
                              initialValue: values.exemption_certificate,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox
                                checked={form.getFieldValue('isInfected')}
                                name="isInfected"
                              ></Checkbox>,
                            )}
                          </Form.Item>
                          <Form.Item
                            label=""
                          >
                            {getFieldDecorator('inspection_exemption_time', {
                              initialValue: values.vacc_expire
                                ? moment(values.vacc_expire)
                                : null,
                              rules: [
                                {
                                  required: form.getFieldValue('isInfected'),
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <DatePicker
                                disabled={!form.getFieldValue('isInfected')}
                                format={formatMessage('datetimeFormat.date')}
                              />,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <Form.Item
                        label={formatMessage('applicationContractor.columns.annexes.name')}
                      // extra="表格扫描文件"
                      >
                        {getFieldDecorator('vacc_base64', {
                          valuePropName: 'fileList',
                          getValueFromEvent: this.normFile,
                        })(
                          <Upload
                            name="logo"
                            accept=".pdf,image/*"
                            customRequest={async ({ file, onSuccess }) => {
                              const base64 = await new Promise(resolve => {
                                const fileReader = new FileReader();
                                fileReader.readAsDataURL(file);
                                fileReader.onload = () => {
                                  resolve(fileReader.result);
                                };
                              });
                              onSuccess(base64);
                              return {
                                abort() { },
                              };
                            }}
                            listType="picture"
                            onPreview={this.handlePhotographPreview}
                          >
                            {annexesUpload ? (
                              <Button>
                                <Icon type="upload" />
                                {formatMessage('applicationStaff.columns.annexes.button')}
                              </Button>
                            ) : null}
                          </Upload>,
                        )}
                      </Form.Item>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationCommon.workerCard.blacklist" />
                      </div>
                      <div className={`${Style.row} ${Style.column2}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationCommon.workerCard.isblacklist')}
                          >
                            {getFieldDecorator('isBlack', {
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationCommon.workerCard.name.errMessage',
                                  ),
                                },
                              ],
                            })(
                              <Checkbox.Group name="isBlack">
                                <Checkbox
                                  key={1}
                                  value={1}
                                >

                                </Checkbox>
                              </Checkbox.Group>,
                            )}
                          </Form.Item>
                        </div>
                      </div>
                      <div className={Style.row}>
                        <FormattedMessage id="applicationContractor.temporary.email" />
                      </div>
                      <div className={`${Style.row}`}>
                        <div>
                          <Form.Item
                            label={formatMessage('applicationContractor.temporary.email')}
                          >
                            {getFieldDecorator('email', {
                              initialValue: currentUser.role_id === '110' ? currentUser.mails[0] : values.email,
                              rules: [
                                {
                                  required: false,
                                  message: formatMessage(
                                    'applicationContractor.temporary.errMessage.email',
                                  ),
                                },
                              ],
                            })(<Input maxLength={255} />)}
                          </Form.Item>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div className={Style.bottom}>
                <Button htmlType="button" onClick={this.handleClear}>
                  {formatMessage('button.clear')}
                </Button>
                <Authorized authority={Power.ContractorApplication.add}>
                  <Button type="primary" htmlType="submit">
                    {formatMessage('button.save')}
                  </Button>
                </Authorized>

              </div>
            </Form>
          </div >
        </Spin >
      </PageHeaderWrapper >
    );
  }
}

export default Index;
